<template>
  <div class="account">
    <el-container>
      <el-header>
        <el-breadcrumb>
          <el-breadcrumb-item>基础信息维护</el-breadcrumb-item>
          <el-breadcrumb-item>适用门店维护</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <div class="main-header">
          <span class="supplier-name">供应商名称:</span>
          <el-input v-model="supplierInput" placeholder="请输入内容" size="small"></el-input>
          <span class="shop-name">适用门店组名称:</span>
          <el-input v-model="shopInput" placeholder="请输入内容" size="small"></el-input>
          <el-button type="primary" size="small" @click="inquire">查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </div>
        <div class="main-content">
          <div class="add-btn">
            <el-button type="primary" size="small" @click="addShopGruop">+ 新增适用门店组</el-button>
            <el-button size="small">批量导入适用门店</el-button>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose"
            >
              <el-form :model="shopAddForm" ref="shopAddForm" :rules="rules" label-width="150px">
                <el-form-item label="供应商" prop="supplier">
                  <el-select v-model="shopAddForm.supplier" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="适用门店组名称" prop="shopGroup">
                  <el-col :span="16">
                    <el-input placeholder="请输入" size="small" v-model="shopAddForm.shopGroup"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="适用门店组图片上传" prop="fileList">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="shopAddForm.fileList"
                  > 
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
          <div class="table-data">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
              <el-table-column prop="shopID" label="门店集合ID" align="center"></el-table-column>
              <el-table-column prop="supplier" label="供应商" align="center"></el-table-column>
              <el-table-column prop="shopName" label="适用门店组名称" align="center"></el-table-column>
              <el-table-column prop="imgUrl" label="图片显示" align="center">
                <template slot-scope="scope">
                  <el-image :src="scope.row.imgUrl" fit="scale-down"></el-image>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="addShop(scope.row)">添加适用门店</el-button>
                  <el-button type="text" size="small" @click="setBtnClick(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="lookBtnClick(scope.row)">查看</el-button>
                  <el-button type="text" size="small" @click="deleteBtnClick(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="pageination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 顶部搜索框
      supplierInput: "",
      shopInput: "",
      dialogVisible: false,
      // fileList: {},
      shopAddForm: {
        supplier: "",
        shopGroup: "",
        fileList: []
      },
      rules: {
        supplier: [
          { required: true, message: "请输入门店名称", trigger: "change" }
        ],
        shopGroup: [
          { required: true, message: "请输入门店名称", trigger: "blur" }
        ],
        fileList: [
          { required: true, message: "请输入门店名称" }
        ]
      },
      // 回显数据
      tableData: [
        {
          order: 1,
          shopID: "safa",
          supplier: "供应商",
          shopName: "四方精创",
          imgUrl:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          order: 2,
          shopID: "safa",
          supplier: "供应商",
          shopName: "四方精创",
          imgUrl:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          order: 3,
          shopID: "safa",
          supplier: "供应商",
          shopName: "四方精创",
          imgUrl:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        }
      ],
      // 当前页
      currentPage: 1,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
    };
  },
  methods: {
    // 查询，重置
    inquire() {
      console.log("查询");
    },
    reset() {
      this.input = "";
      console.log("重置");
    },
    // 新增适用门店组
    addShopGruop() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 行内按钮
    addShop(row) {
      console.log(row, "添加适用门店");
    },
    setBtnClick(row) {
      console.log(row, "编辑");
    },
    lookBtnClick(row) {
      console.log(row, "查看");
    },
    deleteBtnClick(row) {
      console.log(row, "删除");
    },
    // 分页每页条数以及翻页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped>
.account .el-header {
  height: 60px;
  border-bottom: 1px solid #f3f3f3;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
}
.main-header {
  text-align: center;
  align-items: center;
  display: flex;
}
.supplier-name {
  display: inline-block;
  width: 100px;
}
.shop-name {
  display: inline-block;
  width: 125px;
}
.main-header >>> .el-input {
  width: 200px;
  margin-right: 20px;
}
.main-content {
  margin: 40px;
}
.add-btn {
  margin-bottom: 20px;
}
.pageination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>